<template>
  <div ref="stackedLine" :style="{ width: width, height: height }"></div>
</template>
<script>
export default {
  name: 'StackedLine',
  data() {
    return {
      lineData:[]
    }
  },
  props: {
    width: {
      type: String,
      default: ''
    },
    height: {
      type: String,
      default: ''
    },
    unit: {
      type: String,
      default: ''
    },
    data:{
      type:Array,
      default:()=>[]
    },
    seriesName:{
      type:Array,
      default:()=>[]
    },
    xData:{
      type:Array,
      default:()=>[]
    },
    splitLineShow:{
      type:Boolean,
      default:true
    },
    dataZoomShow:{
      type:Boolean,
      default:true
    },
  },
  watch:{
    data:{
      handler(val){
        if (!val[0]) return;
        if (this.seriesName.length >= 1 && val[0].length > 2) {
          this.lineData = val;
        }else{
          let arr = [val];
          this.lineData = arr;
        }
        this.getEchart()
      },
      deep:true
    }
  },
  mounted() {
  },
  methods: {
    getEchart() {
      var mycharToilet = this.$echarts.init(this.$refs.stackedLine)
      const colorListToilet = ['#1890FF','#fe9a8b','#9E87FF', '#73DDFF',  '#F56948', '#9E87FF'];
      let end;
      if (this.lineData[0]) {
        end = this.lineData[0].length >= 15 ?40:100
      }
      let optionToilet = {
        legend: {
          icon: 'circle',
          top: '5%',
          right: '5%',
          itemWidth: 6,
          itemGap: 20,
          textStyle: {
            color: '#556677'
          }
        },
        tooltip: {
          trigger: 'axis',
          // axisPointer: {
          //   label: {
          //     show: true,
          //     backgroundColor: '#fff',
          //     color: '#556677',
          //     borderColor: 'rgba(0,0,0,0)',
          //     shadowColor: 'rgba(0,0,0,0)',
          //     shadowOffsetY: 0
          //   },
          //   lineStyle: {
          //     width: 0
          //   }
          // },
          backgroundColor: 'rgba(0,0,0,0.6)',
          textStyle: { // 文字提示样式
            color: '#fff',
            fontSize: '12'
          },
          borderColor: 'transparent',
          padding: [10, 10],
        },
        grid: {
          left: '8%',
          top: '12%',
          right: '2%',
          bottom: '10%'
        },
        xAxis: [
          {
            type: 'category',
            data: this.xData,
            axisLine: {
              lineStyle: {
                color: '#666'
              }
            }
          }
        ],
        yAxis: [
          {
            name:this.unit,
            splitLine: {
              show:this.splitLineShow,
              lineStyle: {
                show: 'false',
                type: 'dashed',
                color: '#DDD'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999'
              }
            },
            nameTextStyle: {
              color: '#999'
            },
            splitArea: {
              show: false
            }
          }
        ],
        dataZoom:[
          {
            show:this.dataZoomShow,
            type: 'slider',
            realtime: true,
            start: 0,
            end: end,  // 初始展示40%
            height: 4,
            fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
            borderColor: "rgba(17, 100, 210, 0.12)", 
            handleSize:0, // 两边手柄尺寸
            showDetail: false, // 拖拽时是否展示滚动条两侧的文字
            top:'96%',
          },
          // { 
          //   type: "inside",  // 支持内部鼠标滚动平移
          //   start: 0,
          //   end: 40,
          //   zoomOnMouseWheel: false,  // 关闭滚轮缩放
          //   moveOnMouseWheel: true, // 开启滚轮平移
          //   moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
          // }
        ],
        series: [
          // {
          //   name: '小班',
          //   type: 'line',
          //   data: [2, 1, 0, 1, 2],
          //   symbolSize: 1,
          //   symbol: 'circle',
          //   smooth: true,
          //   showSymbol: false,
          //   itemStyle: {
          //     normal: {
          //       color: colorListToilet[0],
          //       borderColor: colorListToilet[0]
          //     }
          //   }
          // },
          // {
          //   name: '中班',
          //   type: 'line',
          //   data: [1, 0, 2, 0, 1],
          //   symbolSize: 1,
          //   symbol: 'circle',
          //   smooth: true,
          //   showSymbol: false,
          //   itemStyle: {
          //     normal: {
          //       color: colorListToilet[1],
          //       borderColor: colorListToilet[1]
          //     }
          //   }
          // },
          // {
          //   name: '大班',
          //   type: 'line',
          //   data: [1, 1, 3, 1, 2],
          //   symbolSize: 1,
          //   symbol: 'circle',
          //   smooth: true,
          //   showSymbol: false,
          //   itemStyle: {
          //     normal: {
          //       color: colorListToilet[2],
          //       borderColor: colorListToilet[2]
          //     }
          //   }
          // }
        ]
      }
      this.seriesName.forEach((item,i) => {
        optionToilet.series.push(
          {
            name: item,
            type: 'line',
            data: this.lineData[i],
            symbolSize: 8,
            symbol: 'circle',
            smooth: true,
            itemStyle: {
              normal: {
                color: colorListToilet[i],
                borderColor: colorListToilet[i]
              }
            }
          }
        )
      });
      mycharToilet.setOption(optionToilet)
      window.addEventListener('resize', () => {
        mycharToilet.resize()
      })
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
